<template>
  <div class="reply">
    <van-popup v-model="show" position="bottom" :style="{ height: '70%' }">
      <!-- 当前评论 -->
      <van-cell title="当前评论" :isShow="true"> </van-cell>
      <comment :item="currenntList" />
      <!-- 评论的回复 -->
      <van-cell title="当前评论" :isShow="true"> </van-cell>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <comment :item="item" v-for="(item, index) in replyList" :key="index" />
      </van-list>
      <!-- 书写评论组件 -->
      <send
        :isShow="true"
        :commid="currenntList.com_id"
        @addcomment="addcomment"
      />
    </van-popup>
  </div>
</template>

<script>
//完成结构与样式
//   先去官网找popuo弹出框,在data里面创建show=false,再到爷爷组件detail里面导入注册使用,再到父组件comment里面给回复添加点击事件,this.$parent.$parent.$refs.reply.show = true,在写当前评论和评论回复的样式,把comment导入进来,注册,使用它绑定的:item="{}"

// 回复按钮的显示与隐藏,在comment定义一个isSow=false (v-if="isShow===false")和detail(:isShow===false)页面中要显示回复,在本页面里要显示隐藏(isShow===true)隐藏

import send from './send.vue' // 书写评论组件
import comment from './comment.vue' // 评论区域
import bus from '@/utils/bus.js' // bus兄弟传值
import { apiReply } from '@/api/article.js'
export default {
  components: {
    comment, // 评论组件,父
    send // 书写评论
  },
  data () {
    return {
      show: false, // 控制弹窗的显示隐藏
      currenntList: {}, // 当前评论数据,注意这是一个对象
      loading: false, // 加载状态  是否完全加载完毕  偏移量  页容量 结束标识
      finished: false,
      offset: null,
      limit: 10,
      endid: 0,
      replyList: [] // 评论数据
    }
  },
  methods: {
    addcomment (newObj) {
      // 将数据添加到回复数据中
      this.replyList.unshift(newObj)
    },
    // list加载事件,连接数组 获取偏移量,第一页不用传,获取最后标识,加载状态改为false,判断,全部加载完毕,渲染数据
    // 解决bug在bus.on里添加属性,清除之前的数据,这样就不会打开别的回复,出现第一次打开的评论
    async onLoad () {
      const res = await apiReply({
        commid: this.currenntList.com_id.toString(),
        offset: this.offset,
        limit: this.limit
      })

      // console.log(res.data.data.results[0].com_id)
      // 连接数组 获取偏移量,第一页不用传,获取最后标识,加载状态改为false,判断,全部加载完毕
      this.replyList = [...this.replyList, ...res.data.data.results]
      this.offset = res.data.data.last_id
      this.endid = res.data.data.end_id
      this.loading = false
      if (this.offset === this.endid) {
        this.finished = true
      }
    }
  },
  created () {
    //   打开页面时利用bus接收数据  利用bus来解决兄弟之间的传值(回复内容,回复),在utils新建bus.js,创建bus, export default new Vue()
    // 在comment页面把props接收过来的item利用bus传过来(this.$emit('pomain',this.item)),在这边导入bus,在进行下面bus.$on操作,直接在页面渲染
    bus.$on('pomain', item => {
      this.offset = null //解决回复一样的bug,将之前的数据全部清空
      this.endid = 0
      this.loading = false
      this.finished = false
      this.replyList = []
      // 在获取当前的评论
      this.currenntList = item
    })
  }
}
</script>

<style></style>
